<script setup lang="ts">
import type { ISpreadExpose } from '@/components/table/spread/index.vue'
import type { ITableCol, ITableDataSet, ITableRow } from '@/types'
import type { IGetConfigParams } from '@/types/api'
import { nextTick, onBeforeMount, onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import searchForm from '@/components/searchForm/index.vue'
import SpreadTable from '@/components/table/spread/index.vue'
import useDataStore from '@/store/modules/data'

const tableRef = ref<(InstanceType<typeof SpreadTable> & ISpreadExpose)[] | null>(null)
const Route = useRoute()
const dataStore = useDataStore()
const loading = ref(false)

const mainDatas = reactive<ITableDataSet[]>([])
function setBaseData(IDDatas = [] as number[]) {
  const IDArr = IDDatas || (Route.meta.dicID as string).split(',').map(val => Number(val))
  IDArr.forEach((val) => {
    mainDatas.push({
      ID: val,
      tableDatas: [] as ITableRow[],
      tableColumns: [] as ITableCol[],
      tableRef: null,
      form: { page: 1, rows: 200 },
      formItems: [],
      loading: false,
      count: 0,
    })
  })
}
onBeforeMount(() => {
  setBaseData([15])
  getConfigData(mainDatas.map(val => ({ ID: val.ID })))
    .then(() => getDataByID(0))
    .then(async () => {
      await nextTick()
      if (tableRef.value) {
        tableRef.value[0]?.setSpreadData?.()
      }
    })
    .catch((err) => {
      console.error(err)
    })
})
onMounted(async () => {

})
async function getConfigData(params: IGetConfigParams[]) {
  loading.value = true
  const res = await dataStore.getConfigData(params)
  loading.value = false
  if (!res)
    return
  res.datas.forEach((val, index: number) => {
    mainDatas[index].tableColumns = val
  })
  res.forms.forEach((val, index: number) => {
    mainDatas[index].formItems = val
    val.forEach((value) => {
      if (value.prop)
        mainDatas[index].form[value.prop] = value.value
    })
  })
}
async function getDataByID(
  remark: number,
  setCondition: ((params: Record<string, any>) => void) | null = null,
) {
  mainDatas[remark].loading = true // 打开加载动画
  const params: Record<string, any> = { dicID: mainDatas[remark].ID }
  Object.assign(params, mainDatas[remark].form)
  if (setCondition)
    setCondition(params) // 获取数据条件有时会复杂。单独配置方法查询数据
  const res = await dataStore.getDataByID(params)
  mainDatas[remark].loading = false // 关闭加载动画
  mainDatas[remark].tableDatas = res?.data || []
}
</script>

<template>
  <div class="APS-contanier">
    <searchForm
      :form-items="mainDatas[0].formItems" :form="mainDatas[0].form" :dic-i-d="1" :sign-name="0"
      :remark="0"
    />
    <div class="APS-table">
      <template v-for="(item, index) in mainDatas" :key="index">
        <SpreadTable ref="tableRef" :remark="index" :main-data="item" />
      </template>
    </div>
  </div>
</template>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}

.APS-contanier {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.APS-title {
  padding: 0 10px;
  width: 100%;
  height: 55px;
  line-height: 55px;
}

.APS-table {
  width: 100%;
  flex-grow: 1;
  overflow: hidden;
}
</style>
